<template>
  <view class="start-index tn-safe-area-inset-bottom">
    <view v-if="tabberPageLoadFlag[0]" :style="{ display: currentIndex === 0 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top>
        <Home ref="home"></Home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{ display: currentIndex === 1 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top>
        <Classify ref="classify"></Classify>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{ display: currentIndex === 2 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top>
        <Purchase ref="purchase"></Purchase>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{ display: currentIndex === 3 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top>
        <Cart ref="cart"></Cart>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[4]" :style="{ display: currentIndex === 4 ? '' : 'none' }">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top>
        <Mine ref="mine"></Mine>
      </scroll-view>
    </view>
    <tn-tabbar class="tabbar" v-model="currentTabbarIndex" :data="normalTabbar" :safe-area-inset-bottom="true" :animation="true"
      @change="switchTabbar" fixed :height="100" :shadow="false"></tn-tabbar>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Home from "./home/home.vue";
import Classify from "./classify/classify.vue";
import Purchase from "./purchase/purchase.vue";
import Cart from "./cart/cart.vue";
import Mine from "./mine/index.vue";
import TnTabbar from "@/tuniao-ui/components/tn-tabbar/src/Tabbar.vue";
import { TabbarItem } from "@/tuniao-ui/types/tn-tabbar";
import { setStorage } from "@/tuniao-ui/utils";

const mine = ref();

// tabbar当前被选中的序号
const currentIndex = ref(0);
// 普通导航栏配置
let currentTabbarIndex = ref<number>(0);
const normalTabbar = ref<TabbarItem[]>([
  {
    title: "首页",
    icon: "home-smile",
    activeIcon: "home-smile-fill",
  },
  {
    title: "分类",
    icon: "assort",
    activeIcon: "assort-fill",
  },
  {
    title: "抢购",
    icon: "light",
    activeIcon: "light-fill",
    //bulge: true,
  },
  {
    title: "购物车",
    icon: "cart",
    activeIcon: "cart-fill",
  },
  {
    title: "我的",
    icon: "my",
    activeIcon: "my-fill",
  },
]);
// 自定义底部对应页面的加载情况
const tabberPageLoadFlag = ref<boolean[]>([true, false, false, false, false]);

function switchTabbar(index: number) {
  // 点击本页无反应
  if (currentIndex.value === index) {
    return;
  }
  const selectPageFlag: boolean = tabberPageLoadFlag.value[index];
  if (selectPageFlag === undefined) {
    return;
  }
  for (let index in tabberPageLoadFlag.value) {
    // 抢购页 和 我的页 不需要缓存
    if (index == "2" || index == "4") {
      tabberPageLoadFlag.value[index] = false;
    }

  }
  if (selectPageFlag === false) {
    tabberPageLoadFlag.value[index] = true;
  }
  // console.log(isFirst)

  currentIndex.value = index;
  uni.setNavigationBarTitle({
    title: normalTabbar.value[index].title,
  });
}

onMounted(() => {
    var url = window.location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      var strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
      }
    }

    // 如果邀请人存在
    if (theRequest["memberNo"]) {
      let memberNo = theRequest["memberNo"];
      setStorage("invite_member_no", memberNo);
    }
  })
</script>

<style lang="scss" scoped>

.tabbar {
  border-top: 1px solid #efefef;
}

</style>
